<template>
	<!-- 新增入库 -->
			<Form :label-width="100">
				<div class="a">
					<FormItem label="仓库管理员:">
						{{userInfo.userName}}
					</FormItem>	
					<FormItem label="入库时间:">
						{{time}}
					</FormItem>
					<FormItem class="input" label="入库仓库:">
						<Select v-model="intoHeader.warehouseId">
							<Option v-for="warehouse in warehouses" :value="warehouse.warehouseId">{{warehouse.warehouseName}}</Option>
						</Select>
					</FormItem>	
					<FormItem class="input" label="采购批次号:">
						<Input v-model="intoHeader.batchNo" placeholder="请输入"></Input>
					</FormItem>	
				</div>
				
				<FormItem>
					<Button class="button" type="error" @click="modal = true">新增</Button>
				</FormItem>
				
				<Modal v-model = "modal" 
				   title="请选择商品" 
				   @on-ok="ok" 
				   @on-cancel="cancel" 
				   ok-text="保存" 
				   cancel-text="取消">
				   <table class="ta">
						<tr>
						 <td>请选择产品类型：</td>
						 <td>
							 <Select v-model="product.productType">
								<Option v-for="proType in productTypes" @click.native="findProductName()" :value="proType">{{proType}}</Option>
							 </Select>
						 </td>
						</tr>
						<tr>
						 <td>请选择产品名称：</td>
						 <td>
							 <Select v-model="product.productName">
								<Option v-for="proName in productNames" @click.native="getMaxNum(proName.productId)" :value="proName.productName">{{proName.productName}}</Option>
							 </Select>
						 </td>
						</tr>
						<tr>
						 <td>请输入入库数量：</td>
						 <td>
							 <Input v-model="product.intoProductNum" placeholder="请输入"></Input>
						 </td>
						</tr>
				   </table>
				  </Modal>
				
				<div class="b">
					<Table border width="1100" :columns="tableInfo.columnInfo" :data="products">
						<template slot-scope="{ row, index }" slot="action">
							<Button  type="error" class="button" @click="remove(index)">删除</Button>
						</template>
					</Table>
					<Button class="save" type="primary" @click="save()">保存</Button>
					<Button  class="return" >返回</Button>
				</div>
				
			</Form>
			
</template>

<script>
	import store from '../../common/store.js';
	import local from '../../common/_local.js';
	import axios from 'axios';
	export default {
		data() {
			return {
				products: [],
				product:{
					productId:0,//产品编号
					productType:'',//产品类型
					productName:'',//产品名称
					intoProductNum:''//入库数量
				},
				modal: false,
				tableInfo: {
					currentPage: 1,
					total: 0,
					columnInfo: [{
							title: "产品编号",
							key: "productId",
							align: 'center'
							
						},
						{
							title: "产品类型",
							key: "productType",
							align: 'center'
						},
						{
							title: "产品名称",
							key: "productName",
							align: 'center'
						},
						{
							title: "入库数量",
							align: 'center',
							key: "intoProductNum",
							
						},
						{
							title: "操作",
							align: 'center',
							slot: 'action',
							width: '130px'
						}
					]
					
				},
				userInfo:{
					userId : 0,//用户编号
					userName : '',//用户姓名
					account : '',//账号名
					password : '',//密码
					telephone : '',//电话号
					storeId : 0//门店编号
				},
				time : '',
				productTypes: [],
				productNames: [],
				warehouses: [],
				intoHeader: {
					batchNo:'',
					warehouseId: 0,
				},
				maxNum:0,
				flag: true
			}
		},
		created: function() {
			this.userInfo.userId = local.getItem("USER_ID");
			this.userInfo.userName = local.getItem('USER_NAME');
			this.getNow();
			this.getIntoHeader();
			this.findProductType();
			
		},
		methods: {
			ok () {
				
				if('' == this.product.productType){
					 this.$Message.error('产品类型不能为空！');
					 this.clear();
					 return;
				}
				if('' == this.product.productName){
					 this.$Message.error('产品名称不能为空！');
					 this.clear();
					 return;
				}
				if(this.product.intoProductNum <= 0){
					 this.$Message.error('入库数量至少为1！');
					 this.clear();
					 return;
				}
				let reg = /^[0-9]*$/;
				if(!reg.test(this.product.intoProductNum)){
					this.$Message.error('入库数量必须为整数！');
					this.clear();
					return;
				}
				let newProduct = {
					productId : this.product.productId,
					productType : this.product.productType,
					productName : this.product.productName,
					intoProductNum : this.product.intoProductNum * 1
				}
				//如果选择的产品名称跟表中重复，只改变数量
				for(let i = 0; i < this.products.length; i++){
					if(newProduct.productName == this.products[i].productName){
						this.products[i].intoProductNum = this.products[i].intoProductNum * 1 + newProduct.intoProductNum * 1;
						this.flag = false;
						break;
					}else {
						this.flag = true;
					}
				}
				if(this.flag){
					this.products.push(newProduct);
				}
				
				this.$Message.info('添加成功');
				//添加完清空上次选择
				this.clear();
				
			},
			cancel () {
				this.clear();
				this.$Message.info('取消成功');
			},
			remove: function(index) {
				this.message.confirm({
					title: "删除提示",
					content: "即将删除产品信息，确定吗？",
					onOk: () => {
						this.products.splice(index,1);
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			//将product内数据清空
			clear () {
				this.product.intoProductNum = '';
				this.product.productType = '';
				this.product.productName = '';
			},
			getIntoHeader () {
				this.http.get({
					url: "/warehouse/info/all/g",
					param: {
						storeId : local.getItem('STORE_ID'),
					}
				}).then(data => {
					this.warehouses = data.resultData;
					
				});
			},
			//获取当前时间
			getNow () {
				let time = new Date();
				this.time = time.getFullYear() + '-' + (time.getMonth()+1) + '-' + time.getDate();
			},
			//添加入库订单
			save () {
				if (0 === this.intoHeader.warehouseId) {
					this.$Message.error('仓库名称不能为空！');
					return;
				}
				if ('' === this.intoHeader.batchNo) {
					this.$Message.error('采购批次号不能为空！');
					return;
				}
				if (0 == this.products.length) {
					this.$Message.error('产品信息不能为空！');
					return;
				}
				let intoHeaderIntoItem = {
					warehouseId: this.intoHeader.warehouseId,
					userId: this.userInfo.userId,
					storeId: local.getItem('STORE_ID'),
					pbatchNo: this.intoHeader.batchNo,
					intoItemPurchaseItem : JSON.stringify(this.products)
				};
				this.http.post({
					url: "/into/info",
					param: intoHeaderIntoItem
				}).then(data => {
					this.$tabs.close();
				});
				
			},
			//查询产品类型
			findProductType () {
				this.http.get({
					url: "/product/type/list/g",
					param: {
					}
				}).then(data => {
					this.productTypes = data.resultData;
				});
			},
			//查询产品名称
			findProductName () {
				this.http.get({
					url: "/product/product/list",
					param: {
						type: this.product.productType
					}
				}).then(data => {
					this.productNames = data;
				});
		
			},
			getMaxNum (productId) {
				this.product.productId = productId;
			}
		}
	}
</script>

<style>
	.a{
		width: 50%;
		height: 65%;
		margin: 0 auto;
		margin-top: 30px;
		position: relative;
		left: 10%;
	}
	.a>*{
		margin-top: -20px;
	}
	.b{
		width: 100%;
		margin: 0 auto;
		position: relative;
		left: 8%;
	}
	.input{
		width: 250px;
	}
	.button{
		width: 80px;
		margin-left: 5px;
	}
	.return{
		float: right;
		position: relative;
		right: 16%;
		width: 80px;
		margin-top: 20px;
	}
	.save{
		width: 80px;
		margin-top: 20px;
	}
	.ta{
		margin-left: 25%;
		width: 250px;
	}
	
	.ta tr{
		line-height: 50px;
	}
	.ta tr td{
		width: 180px;
	}
</style>